<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>网吧计费管理系统</title>
		 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
		  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
		  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
		  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
		 <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/http-vue-loader@1.4.2/src/httpVueLoader.min.js"></script>
		<script src="./conf.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!-- 登录 -->
			<div>
				
			</div>
		</div>
	</body>

	<script>
		let vm = new Vue({
			el: '#app',
			components: {
				'main_view': httpVueLoader('main.vue'),
				'register_user_view': httpVueLoader('RegisterUser.vue'),
				'goods_manage_view': httpVueLoader('GoodsManage.vue'),
				'goods_add_view': httpVueLoader('AddGoods.vue'),
				'cost_manage_view': httpVueLoader('CostManage.vue'),
			},
			data: {
				main_view: 'main_view',
				username: '',
			},
			watch: {
				toWatch: function(val) {

				},
			},
			mounted() {
				//test
				// this.main_view = 'cost_manage_view';
				$.ajax({
					url: conf.ur + "/doLogin",
					type: 'post',
					dataType: 'json',
					data: JSON.stringify({
						"username": "admin",
						"password": "admin"
					}),
					headers: {
						"Content-Type": "application/json"
					},
					success: (data) => {
						let sysUser = data.sysUser;
						this.username = sysUser.username;
						conf.storage.setItem('x-auth-token', sysUser.token);
						conf.storage.setItem('sysUser', JSON.stringify(sysUser));
					},
					error: (err) => {
						console.log("网络异常！")
					}
				});
			},
			methods: {
				//切换组件用
				handleChangeView: function(componentName) {
					this.main_view = componentName;
				},
			}
		})
	</script>

	<style>
		html,
		body {
			height: 100%;
			margin: 0px;
			padding: 0px;
		}

		#app {
			background-color: #999;
			height: 100%;
		}

		.app-header {
			background-color: #85d989;
			width: 100%;
			height: 50px;
		}

		#main-container {
			background-color: ghostwhite;
			width: 100%;
			position: absolute;
			top: 50px;
			bottom: 0px;
			left: 0px;
		}

		.jumbotron {
			background-color: ghostwhite;
		}
	</style>
</html>
